<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>弓友之家</title>
    <link rel="stylesheet" href="css/mui.css" />
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="stylesheet" href="css/style.css" />
    <style>
    	body{background: #F5F5F5;}
    	.rank-title{position: initial;}
    </style>
</head>
<body> 
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">赛场详情</h1>
		<a class="mui-icon mui-icon-more-filled mui-pull-right shareBtn"></a>
	</header>
	<div class="mui-content">
		<div class="rank-title mui-clearfix">
			<a class="on">赛场花絮</a>
			<a>成绩单</a>
			<a>个人赛</a>
			<a>团体赛</a>
		</div>
		<div class="game-page">
			<div class="con mui-clearfix imgs">
			</div>
			<div class="con mui-hidden">
				<img src="" class="cj" />
			</div>
			<div class="con mui-hidden">
				<div class="sex-class">
					<a href="javacsript:void(0)" class="on">男子组</a>
					<a href="javascript:void(0)">女子组</a>
				</div>
				<div class="sex-con">
					<div class="con boy">
						<div class="game-rank mui-text-center">
							<div class="rank rank1">
								
							</div>
							<div class="mui-row row1">
								
							</div>
							<div class="mui-row row2">
								
							</div>
							<div class="mui-row  row3">
								
							</div>
						</div>
					</div>
					<div class="con girl mui-hidden">
						<div class="game-rank mui-text-center">
							<div class="rank rank1">
								
							</div>
							<div class="mui-row row1">
								
							</div>
							<div class="mui-row row2">
								
							</div>
							<div class="mui-row  row3">
								
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="con mui-hidden">
				<div class="new-game-rank">
				</div>
			</div>
		</div>
	</div>
	<!--分享-->
	<div class="shareWx mui-hidden"> 
		<ul class="mui-list-unstyled">
			<li class="tel"><a href="javascript:void(0)" onclick="shareWeixinMessage(1)">微信好友</a></li>
			<li class="qq"><a href="javascript:void(0)" onclick="shareWeixinMessage(2)">朋友圈</a></li>
		</ul>
		<button type="button" class="cancleShare">取消</button>
	</div>
	<script type="text/javascript" src="js/mui.min.js" ></script>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	<script type="text/javascript" src="js/common.js" ></script>
	<script type="text/javascript" src="js/mui.zoom.js" ></script>
	<script type="text/javascript" src="js/mui.previewimage.js" ></script>
	<script type="text/javascript" charset="utf-8">
      	mui.init();
      	var nid="";
      	var gameimg="";
      	var gamename="";
      	mui.plusReady(function(){
      		var _self=plus.webview.currentWebview();
      		nid=_self.nid;
      		mui.ajax(H_SRC+'/amier/index/match_imgs',{
				data:{
					mid:nid,
					token:token
				},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				headers:{'Authorization':token},              
				success:function(data){
					var dataurl=data.data;
					if(data.code == 401)
					{
						mui.openWindow({
							url:'login.html',
							id:'login.html'
						})
					}else if(data.code == 1) 
					{
						var img="";
						var imgs = dataurl.imgs;
						imgs = imgs.split(",");
						for(var i=0;i<imgs.length;i++){
							img+='<div class="img"><img src="'+H_SRC+''+imgs[i]+'" data-preview-src="" data-preview-group="2"/></div>';
						}
						$(".imgs").html(img);
						mui.previewImage();
				      	$(function(){
				      		var w=$(window).width()*0.225;
				      		$(".img").css("height",w);
				      	})
				      	
				      	//成绩
				      	$(".cj").attr("src",H_SRC+''+dataurl.report);
				      	
	      				//冠亚军排行
	      				var rank="";
	      				for(var i=0;i<dataurl.team.length;i++){
	      					rank+='<div class="new-rank">';
	      					rank+='<h3>'+dataurl.team[i].ranking_name+'</h3>';
							rank+='<h4>'+dataurl.team[i].team_name+'</h4><a href="javascript:void(0)" data-id="'+dataurl.team[i].team_id+'">查看详情</a><div class="mui-row">';
							rank+='<div class="mui-col-xs-3"><div class="con"><div class="img" style="background:url('+H_SRC+''+dataurl.team[i].head_pic1+') no-repeat center;background-size:cover;"><img src="'+H_SRC+''+dataurl.team[i].head_pic1+'" data-preview-src="" data-preview-group="'+dataurl.team[i].team_id+'"/></div><p class="name">'+dataurl.team[i].member_1+'</p></div></div>';
							rank+='<div class="mui-col-xs-3"><div class="con"><div class="img" style="background:url('+H_SRC+''+dataurl.team[i].head_pic2+') no-repeat center;background-size:cover;"><img src="'+H_SRC+''+dataurl.team[i].head_pic2+'" data-preview-src="" data-preview-group="'+dataurl.team[i].team_id+'"/></div><p class="name">'+dataurl.team[i].member_2+'</p></div></div>';
							rank+='<div class="mui-col-xs-3"><div class="con"><div class="img" style="background:url('+H_SRC+''+dataurl.team[i].head_pic3+') no-repeat center;background-size:cover;"><img src="'+H_SRC+''+dataurl.team[i].head_pic3+'" data-preview-src="" data-preview-group="'+dataurl.team[i].team_id+'"/></div><p class="name">'+dataurl.team[i].member_3+'</p></div></div>';
							rank+='<div class="mui-col-xs-3"><div class="con"><div class="img" style="background:url('+H_SRC+''+dataurl.team[i].head_pic4+') no-repeat center;background-size:cover;"><img src="'+H_SRC+''+dataurl.team[i].head_pic4+'" data-preview-src="" data-preview-group="'+dataurl.team[i].team_id+'"/></div><p class="name">'+dataurl.team[i].member_4+'</p></div></div>';
							rank+='</div></div></div>';
	      				}
	      				$(".new-game-rank").append(rank);
	      				mui.previewImage();
	      				$(".new-game-rank").on("tap","a",function(){
							mid=$(this).attr("data-id");
							mui.openWindow({
								url:'integralrank-page02.html',
								id:'integralrank-page02.html',
								createNew:true,
								show: {
									autoShow: true,
									aniShow: 'slide-in-right',
									duration: 200,
								},
								extras:{
									mid:mid
								}
							});
						})
	      				
	      				
	      				//女子组
	      				var rank1="";
	      				rank1+='<dl><a>';
						rank1+='<dt><img src="'+H_SRC+''+dataurl.girls[0].head_pic+'" data-preview-src="" data-preview-group="3"/></dt>';
						rank1+='<dd><h4 class="mui-ellipsis">'+dataurl.girls[0].realName+'</h4><p class="mui-ellipsis">'+dataurl.girls[0].ranking_name+'</p><span href="javascript:void(0)" data-id="'+dataurl.girls[0].member_id+'">查看详情</span></a></dl>';
	      				$(".girl .rank1").html(rank1); 
	      				gamename=dataurl.girls[0].title;
	      				var rank2="";
	      				for(var i=1;i<3;i++){
	      					rank2+='<div class="mui-col-xs-6"><div class="rank rank2"><dl><a>';
							rank2+='<dt><img src="'+H_SRC+''+dataurl.girls[i].head_pic+'" data-preview-src="" data-preview-group="3"/></dt>';
							rank2+='<dd><h4 class="mui-ellipsis">'+dataurl.girls[i].realName+'</h4><p class="mui-ellipsis">'+dataurl.girls[i].ranking_name+'</p><span href="javascript:void(0)" data-id="'+dataurl.girls[i].member_id+'">查看详情</span>';
							rank2+='</dd></a></dl></div></div>';
	      				}
	      				$(".girl .row1").html(rank2);
	      				if(dataurl.girls.length>3){
	      					var rank3="";
		      				for(var i=3;i<6;i++){
		      					rank3+='<div class="mui-col-xs-4"><div class="rank rank3"><dl><a>';
								rank3+='<dt><img src="'+H_SRC+''+dataurl.girls[i].head_pic+'" data-preview-src="" data-preview-group="3"/></dt>';
								rank3+='<dd><h4 class="mui-ellipsis">'+dataurl.girls[i].realName+'</h4><p class="mui-ellipsis">'+dataurl.girls[i].ranking_name+'</p><span href="javascript:void(0)" data-id="'+dataurl.girls[i].member_id+'">查看详情</span>';
								rank3+='</dd></a></dl></div></div>';
		      				}
		      				$(".girl .row2").html(rank3);
	      				}
	      				if(dataurl.girls.length>6){
	      					var rank4="";
		      				for(var i=6;i<dataurl.girls.length;i++){
		      					rank4+='<div class="mui-col-xs-3"><div class="rank rank4"><dl><a>';
								rank4+='<dt><img src="'+H_SRC+''+dataurl.girls[i].head_pic+'" data-preview-src="" data-preview-group="3"/></dt>';
								rank4+='<dd><h4 class="mui-ellipsis">'+dataurl.girls[i].realName+'</h4><p class="mui-ellipsis">'+dataurl.girls[i].ranking_name+'</p><span href="javascript:void(0)" data-id="'+dataurl.girls[i].member_id+'">查看详情</span>';
								rank4+='</dd></a></dl></div></div>';
		      				}
		      				$(".girl .row3").html(rank4);
	      				}
	      				
	      				//男子组
	      				var rank1="";
	      				rank1+='<dl><a>';
						rank1+='<dt><img src="'+H_SRC+''+dataurl.boys[0].head_pic+'" data-preview-src="" data-preview-group="1"/></dt>';
						rank1+='<dd><h4 class="mui-ellipsis">'+dataurl.boys[0].realName+'</h4><p class="mui-ellipsis">'+dataurl.boys[0].ranking_name+'</p><span href="javascript:void(0)" data-id="'+dataurl.boys[0].member_id+'">查看详情</span></a></dl>';
	      				$(".boy .rank1").html(rank1);
	      				var rank2="";
	      				for(var i=1;i<3;i++){
	      					rank2+='<div class="mui-col-xs-6"><div class="rank rank2"><dl><a>';
							rank2+='<dt><img src="'+H_SRC+''+dataurl.boys[i].head_pic+'" data-preview-src="" data-preview-group="1"/></dt>';
							rank2+='<dd><h4 class="mui-ellipsis">'+dataurl.boys[i].realName+'</h4><p class="mui-ellipsis">'+dataurl.boys[i].ranking_name+'</p><span href="javascript:void(0)" data-id="'+dataurl.boys[i].member_id+'">查看详情</span>';
							rank2+='</dd></a></dl></div></div>';
	      				}
	      				$(".boy .row1").html(rank2);
	      				var rank3="";
	      				for(var i=3;i<6;i++){
	      					rank3+='<div class="mui-col-xs-4"><div class="rank rank3"><dl><a>';
							rank3+='<dt><img src="'+H_SRC+''+dataurl.boys[i].head_pic+'" data-preview-src="" data-preview-group="1"/></dt>';
							rank3+='<dd><h4 class="mui-ellipsis">'+dataurl.boys[i].realName+'</h4><p class="mui-ellipsis">'+dataurl.boys[i].ranking_name+'</p><span href="javascript:void(0)" data-id="'+dataurl.boys[i].member_id+'">查看详情</span>';
							rank3+='</dd></a></dl></div></div>';
	      				}
	      				$(".boy .row2").html(rank3);
	      				if(dataurl.boys.length>6){
	      					var rank4="";
		      				for(var i=6;i<dataurl.boys.length;i++){
		      					rank4+='<div class="mui-col-xs-3"><div class="rank rank4"><dl><a>';
								rank4+='<dt><img src="'+H_SRC+''+dataurl.boys[i].head_pic+'" data-preview-src="" data-preview-group="1"/></dt>';
								rank4+='<dd><h4 class="mui-ellipsis">'+dataurl.boys[i].realName+'</h4><p class="mui-ellipsis">'+dataurl.boys[i].ranking_name+'</p><span href="javascript:void(0)" data-id="'+dataurl.boys[i].member_id+'">查看详情</span>';
								rank4+='</dd></a></dl></div></div>';
		      				}
		      				$(".boy .row3").html(rank4);
	      				}
	      				
	      				mui.previewImage();
	      				$(".sex-con").on("tap","span",function(){
							var mid=$(this).attr("data-id");
							mui.openWindow({ 
								url:'integralrank-page.html',
								id:'integralrank-page.html',
								createNew:true,
								show: {
									autoShow: true,
									aniShow: 'slide-in-right',
									duration: 200,
								},
								extras:{
									mid:mid
								}
							});
						})
					}else{ 
						mui.toast(data.msg);
					}
				},
				error:function(){
				}
			}) 
      	})
      	
      	$(".rank-title a").on("tap",function(){
      		var a=$(this).index();
      		$(this).addClass("on").siblings().removeClass("on");
      		$(".game-page > .con").eq(a).removeClass("mui-hidden").siblings().addClass("mui-hidden");
      	})
      	
      	$(".sex-class a").on("tap",function(){
      		var a=$(this).index();
      		$(this).addClass("on").siblings().removeClass("on");
      		$(".sex-con .con").eq(a).removeClass("mui-hidden").siblings().addClass("mui-hidden");
      	})
      	
      	function shareWeixinMessage(type){
			var type=type;
			if(type==1){
				var secne="WXSceneSession"
			}else{
				var secne="WXSceneTimeline"
			}
			sharewx.send( 
				{ 
					title:gamename,
					content:gamename, 
					href:H_SRC+'/match_imgs/'+nid,
					thumbs: [H_SRC+'/defaultimg.jpg'], 
		        	pictures: [H_SRC+'/defaultimg.jpg'], 
					extra:{scene:secne}
				}, 
				function(){
					mask.close();
					$(".shareWx").addClass("mui-hidden");
					mui.toast( "分享成功！" );
				}, function(e){
					mask.close();
					$(".shareWx").addClass("mui-hidden");
					mui.toast( "取消分享");
				}
			);
		}
    </script>
</body>
</html>